<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>

    <style>

    </style>

</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="jumbotron">
                    <h3>换一种心情，换一段经历。</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 ">
                    <p><h4>原头像</h4></p>
                    <p><img src="/media/{{ request.user.avatar }}" alt="" height="200">

                </div>
                <div class="col-md-4 pull-right ">
                    <div class="form-group">
                        <p><h4>请选择上传图片</h4></p>
                        <p>
                            <label for="myfile_id" style="margin-left: 10px">
                                {% load static %}
                                <img src="{% static 'img/default.jpg' %}" alt="图片加载"
                                     height="200" id="myimg">
                                {#点击图片也可以打开文件，进行上传 因为label for 的id是文件上传的#}
                            </label>
                            <input type="file" id="myfile_id" name="avatar" style="display: none">
                            <!--display:none  隐藏掉-->
                        </p>

                    </div>

                </div>

            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <button id="id_commit" class="btn btn-primary btn-block">确认</button>
                    <a href="{{ url }}" type="button" class="btn btn-primary btn-block " data-dismiss="modal">
                        取消
                    </a>
                </div>
            </div>

        </div>
        <script>
            $('#myfile_id').change(function () {
                //文件阅读器对象
                //1 先生成一个文件阅读器对象
                let myFileReaderObje = new FileReader();
                //2 获取用户上传的头像文件,怎么拿上传的文件，通过下面，可以$(this)
                let fileObj = $('#myfile_id')[0].files[0]
                //3 将文件对象交给阅读器对象读取
                myFileReaderObje.readAsDataURL(fileObj)//异步操作，不等待文件阅读完毕，文件还没有读完，就走到下一步了。
                //4 利用文件阅读器将文件展示到前端页面，修改src属性
                //等待文件阅读器加载完毕再执行，unload,再显示图片
                myFileReaderObje.onload = function () {
                    $('#myimg').attr('src', myFileReaderObje.result)
                }

            })
            $("#id_commit").on('click', function () {
                let formDataObj = new FormData();
                let fileObj = $('#myfile_id')[0].files[0]
                formDataObj.append('file', fileObj)
                $.ajax({
                    url: '{% url "app01_change_avatar" %}',
                    type: 'post',
                    data: formDataObj,
                    contentType: false,
                    processData: false,
                    success: function (array) {
                        if (array.code === 1000) {
                            alert(array.msg)
                            if('{{ url }}'){
                                parent.location.href ='{{ url }}'
                            }
                        else {
                             parent.location.href ='/app01/home/'
                            }

                        }
                        else
                        {
                            alert(array.msg)
                        }

                    }
                })


            })

        </script>
    </div>


</body>
</html>